<h2>用户列表</h2>
<a href="/admin/users/create" class="btn btn-success mb-3">添加用户</a>

<form method="get" action="/admin/users" class="mb-3">
  <div class="input-group">
    <input type="text" name="keyword" class="form-control" placeholder="请输入关键字" value="{{keyword}}">
    <button class="btn btn-outline-secondary">搜索</button>
  </div>
</form>
<table class="table">
  <thead>
  <tr>
    <th>用户名</th>
    <th>邮箱</th>
    <th>状态</th>
    <th>排序</th>
    <th>操作</th>
  </tr>
  </thead>
  <tbody>
  {{#each users}}
    <tr>
      <td>{{this.username}}</td>
      <td>{{this.email}}</td>
      <td>
        <span class="status-toggle" data-id="{{this.id}}" data-status="{{this.status}}">
          {{#if this.status}}
            <i class="bi bi-check-circle-fill text-success"></i>
          {{else}}
            <i class="bi bi-x-circle-fill text-danger"></i>
          {{/if}}
        </span>
      </td>
      <td>
        <span class="sort-text" data-id="{{this.id}}">{{this.sort}}</span>
        <input type="number" class="form-control sort-input d-none" style="width: 50%;" data-id="{{this.id}}"
               value="{{this.sort}}" />
      </td>
      <td>
        <a href="/admin/users/{{this.id}}" class="btn btn-primary btn-sm ">查看</a>
        <a href="/admin/users/{{this.id}}/edit" class="btn btn-warning btn-sm ">编辑</a>
        <a class="btn btn-danger btn-sm" onclick="deleteUser({{this.id}})">删除</a>
      </td>
    </tr>
  {{/each}}
  </tbody>
</table>
<nav>
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link {{#if (eq page 1)}}disabled{{/if}}" href="?page={{dec page}}&limit={{limit}}
      &keyword={{keyword}}">上一页</a>
    </li>
    {{#each (range 1 pageCount)}}
      <!--      如果当前遍历的页码数字和上一层的页码一样的话，就激活当前页码-->
      <li class="page-item {{#if (eq this ../page)}}active{{/if}}">
        <a class="page-link" href="?page={{this}}&limit={{../limit}}&keyword={{../keyword}}">{{this}}</a>
      </li>
    {{/each}}

    <li class="page-item {{#if (eq page pageCount) }}disabled{{/if}}">
      <a class="page-link" href="?page={{inc page}}&limit={{limit}}&keyword={{keyword}}">下一页</a>
    </li>
    <li>
      <form action="/admin/users" method="get" class="d-inline-block ms-3">
        <input type="text" hidden name="keyword" value="{{keyword}}">
        <input type="text" hidden name="page" value="{{page}}">
        <div class="input-group">
          <input type="number" name="limit" class="form-control" placeholder="每页条数" value="{{limit}}" min="1" />
          <button type="submit" class="btn btn-outline-secondary">设置每页条数</button>
        </div>
      </form>
    </li>
  </ul>
</nav>
<script>
  function deleteUser(id) {
    if (confirm("您确定要删除该用户吗？")) {
      $.ajax({
        url: `/admin/users/${id}`,
        method: "delete",
        success: function(data) {
          if (data.success) {
            const params = new URLSearchParams(window.location.search);
            params.delete("page");
            params.append("page", 1);
            // location.reload();

            window.location.href = `${window.location.pathname}?${params.toString()}`;
          }
        }
      });
    }
  }

  $(function() {
    $(".sort-text").on("dblclick", function() {
      const $this = $(this);
      const id = $this.data("id");
      // 隐藏文本，显示输入框
      $this.addClass("d-none");
      $(`.sort-input[data-id="${id}"]`).removeClass("d-none");
    });
    $(".sort-input").on("blur", function() {
      const $this = $(this);
      const id = $this.data("id");
      const newSort = $this.val();
      // 隐藏输入框
      $this.addClass("d-none");

      // 调接口更新数据库
      $.ajax({
        url: `/admin/users/${id}`,
        method: "PUT",
        headers: {
          "accept": "application/json"
        },
        contentType: "application/json",
        data: JSON.stringify({ sort: newSort }),
        success: function(data) {
          if (data.success) {
            // 更新DOM文本
            $(`.sort-text[data-id="${id}"]`).removeClass("d-none").text(newSort);
          }
        }
      });
    });

    $(".status-toggle").on("click", function() {
      let $this = $(this);
      const id = $this.data("id");
      let status = $this.data("status");
      const newStatus = status ? 0 : 1;
      $.ajax({
        url: `/admin/users/${id}`,
        method: "PUT",
        headers: {
          "accept": "application/json"
        },
        contentType: "application/json",
        data: JSON.stringify({ status: newStatus }),
        success: function(data) {
          if (data.success) {
            $this.data("status", newStatus);
            $this.html(`<i class="bi ${newStatus ? "bi-check-circle-fill text-success" : "bi-x-circle-fill text-danger"}"></i>`);
          }
        }
      })
      ;
    });
  });
</script>